<template>
	<view style="background-color: #fff;">
		<uni-section title="基础数据" type="line">
			<uni-forms ref="tablefrom" :rules="tableRules" labelWidth="80px" :modelValue="tableFormData"
				style="width: 98%;margin-left: 1%;">
				<view class="row-parent row-item">
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="检验项:" name="FeatureCode" labelWidth="30%">
								<uni-data-select v-show="inputshow===false" v-model="FeatureCode" :localdata="pcpList"
									@change="ChangeSelect"></uni-data-select>
								<uni-easyinput v-show="inputshow" type="text" v-model="tableFormData.FeatureCode"
									placeholder="请输入检验项" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="实测值:" name="Value" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.Value" placeholder="请输入实测值" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="测量描述:" name="Description" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.Description" placeholder="请输入测量描述" />
							</uni-forms-item>
						</view>
					</view>
				</view>
				<view class="row-parent row-item" style="margin-top: 30upx;">
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="标准值:" name="chitStandardvalue" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.chitStandardvalue"
									placeholder="请输入标准值" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="正误差:" name="chitPositiveerror" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.chitPositiveerror"
									placeholder="请输入正误差" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="负误差:" name="chitNegativeerror" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.chitNegativeerror"
									placeholder="请输入负误差" />
							</uni-forms-item>
						</view>
					</view>
				</view>
				<view class="row-parent row-item" style="margin-top: 30upx;">
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="不良数:" name="ErrorCount" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.ErrorCount" placeholder="请输入不良数" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="序列号/刻字号:" name="SerialNo" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.SerialNo" placeholder="请输入序列号/刻字号" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="操作员:" name="czy" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.czy" placeholder="请输入操作员" />
							</uni-forms-item>
						</view>
					</view>
				</view>
				<view class="row-parent row-item" style="margin-top: 30upx;">
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="现场标号:" name="xcbh" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.xcbh" placeholder="请输入现场标号" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="设备标号型号:" name="sbbh" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.sbbh" placeholder="请输入设备标号型号" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="装夹方式:" name="zjfs" labelWidth="30%">
								<uni-data-select v-model="tableFormData.zjfs" @change="changezjfs"
									:localdata="zjfslist"></uni-data-select>
							</uni-forms-item>
						</view>
					</view>
				</view>
				<view class="row-parent row-item" style="margin-top: 30upx;">
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="加工设备:" name="shebei" labelWidth="30%">
								<uni-easyinput type="text" v-model="tableFormData.shebei" placeholder="请输入加工设备" />
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="异常类型:" name="DescriptionSelect" labelWidth="30%">
								<uni-data-select v-model="tableFormData.DescriptionSelect"
									@change="changeDescriptionSelect"
									:localdata="DescriptionSelectlist"></uni-data-select>
							</uni-forms-item>
						</view>
					</view>
					<view class="row-style " style="margin-left: 8upx;">
						<view class="flex-twice radius">
							<uni-forms-item label="工艺资源组:" name="processResourcesGroup" labelWidth="30%">
								<uni-data-select v-model="tableFormData.processResourcesGroup"
									@change="changeProcessResourcesGroup"
									:localdata="processResourcesGrouplist"></uni-data-select>
							</uni-forms-item>
						</view>
					</view>
				</view>
			</uni-forms>
		</uni-section>
		<uni-section title="点击拍照" type="line">
			<view class="uni-file-picker__container" style="margin-left: 2%;">
				<view class="file-picker__box" v-for="(item,index) in imageList" :key="index">
					<view class="file-picker__box-content">
						<image class="file-image" :src="item" mode="aspectFill" @click.stop="prviewImage(item,index)">
						</image>
						<view class="icon-del-box" @click.stop="delFile(index)">
							<view class="icon-del"></view>
							<view class="icon-del rotate"></view>
						</view>
					</view>
				</view>
				<view class="file-picker__box">
					<view class="file-picker__box-content is-add" @click="choose">
						<slot>
							<view class="icon-add"></view>
							<view class="icon-add rotate"></view>
						</slot>
					</view>
				</view>
			</view>
			<view style="height: 70px;margin-top: 1%;padding-bottom: 2%;">
				<button class="mini-btn " style="width: 50%; margin-left: 25%;" @click="upload"
					type="primary">保存</button>
			</view>
		</uni-section>
		<uni-popup ref="popup" background-color="#fff">
			<view style="width:35vh;height:20vh;/">
				<button type="primary" style="width:15vh; margin-top:2vh;" @click="photo">拍照</button>
				<button type="primary" style="width:15vh; margin-top:2vh;" @click="album">相册</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import {
		pcpGetList,
		listByCode,
		TaskTFsceneEax
	} from '@/api/system/fankui'
	export default {
		data() {
			return {
				FeatureCode: "",
				inputshow: false,
				pcpList: [{
					text: "自定义",
					value: "自定义",
				}],
				itemValue: [],
				workItem: {},
				imageList: [],
				filePath: [],
				processResourcesGrouplist: [],
				tableFormData: {
					"FeatureCode": "",
					"Value": "",
					"Description": "",
					"chitStandardvalue": "",
					"chitPositiveerror": "",
					"chitNegativeerror": "",
					"ErrorCount": "",
					"SerialNo": "",
					"czy": "",
					"sbbh": "",
					"xcbh": "",
					"zjfs": "",
					"zjfsText": "",
					"shebei": "",
					"DescriptionSelect": "",
					"DescriptionSelectText": "",
					"fileList": [],
					"processResourcesGroup": "",
					"processResourcesGroupText": "",
				},
				DescriptionSelectlist: [],
				zjfslist: [],
				tableRules: {
					ErrorCount: {
						rules: [{
							required: true,
							errorMessage: '不良数不能为空'
						}, {
							format: 'number',
							errorMessage: '不良数只能输入数字'
						}]
					},
				},
			}
		},
		onLoad(params) {
			this.workItem = JSON.parse(params.parme);
			this.initData();
			this.tableFormData.czy = JSON.parse(params.parme).findRenYuan;
			this.tableFormData.shebei = JSON.parse(params.parme).jobResourname;
		},
		created() {

		},
		methods: {
			//工艺资源组 汉字
			changeProcessResourcesGroup(e) {
				for (var i = 0; i < this.processResourcesGrouplist.length; i++) {
					if (this.processResourcesGrouplist[i].value === e) {
						this.tableFormData.processResourcesGroupText = this.processResourcesGrouplist[i].text
					}
				}
			},
			//异常类型 汉字
			changeDescriptionSelect(e) {
				for (var i = 0; i < this.DescriptionSelectlist.length; i++) {
					if (this.DescriptionSelectlist[i].value === e) {
						this.tableFormData.DescriptionSelectText = this.DescriptionSelectlist[i].text
					}
				}
			},
			//装夹方式 汉字 
			changezjfs(e) {
				for (var i = 0; i < this.zjfslist.length; i++) {
					if (this.zjfslist[i].value === e) {
						this.tableFormData.zjfsText = this.zjfslist[i].text
					}
				}
			},
			initData() {
				// 检验项
				pcpGetList(this.workItem.jobId).then((res) => {
					this.itemValue = res.data;
					for (var i = 0; i < res.data.length; i++) {
						let d = {
							text: res.data[i].chitName,
							value: res.data[i].chitId,
						}
						this.pcpList.push(d);
					}
				});
				//工艺资源组 
				listByCode("QUALITY.PROCESS_RESOURCES_GROUP").then((res) => {
					for (var i = 0; i < res.data.length; i++) {
						let d = {
							text: res.data[i].dictName,
							value: res.data[i].dictCode,
						}
						this.processResourcesGrouplist.push(d);
					}
				});
				//异常类型
				listByCode("QA_ABNORMAL_TYPE").then((res) => {
					for (var i = 0; i < res.data.length; i++) {
						let d = {
							text: res.data[i].dictName,
							value: res.data[i].dictCode,
						}
						this.DescriptionSelectlist.push(d);
					}
				});
				// 装夹方式				
				listByCode("QA_CLAMPING_METHOD").then((res) => {
					for (var i = 0; i < res.data.length; i++) {
						let d = {
							text: res.data[i].dictName,
							value: res.data[i].dictCode,
						}
						this.zjfslist.push(d);
					}
				});
				//设备
				TaskTFsceneEax(this.workItem.jobId).then((res) => {
					for (var i = 0; i < res.data.length; i++) {
						this.tableFormData.sbbh = res.data[i].matoName;
						this.tableFormData.xcbh = res.data[i].matoCode;
					}
				});
			},
			ChangeSelect(e) {
				this.tableFormData.FeatureCode = "";
				this.tableFormData.chitValuetype = "";
				this.tableFormData.chitStandardvalue = "";
				this.tableFormData.chitPositiveerror = "";
				this.tableFormData.chitNegativeerror = "";
				console.log("e:", e);
				if (e == "自定义") {
					this.inputshow = true;
				} else {
					for (var i = 0; i < this.itemValue.length; i++) {
						console.log("this.itemValue[i].chitId:", this.itemValue[i].chitId);
						if (this.itemValue[i].chitId === e) {
							this.tableFormData.FeatureCode = this.itemValue[i].chitName;
							this.tableFormData.chitValuetype = this.itemValue[i].chitValuetype;
							this.tableFormData.chitStandardvalue = this.itemValue[i].chitStandardvalue;
							this.tableFormData.chitPositiveerror = this.itemValue[i].chitPositiveerror;
							this.tableFormData.chitNegativeerror = this.itemValue[i].chitNegativeerror;
						}
					}
				}

			},
			async Submit() {
				var that = this;
				this.picturezip();
				var intervalId = setInterval(function() {
					if (that.filePath.length == that.imageList.length) {
						that.$modal.closeLoading();
						clearInterval(intervalId);
						that.tableFormData.fileList = that.filePath;
						// 当前页面跳转到目标页面时设置参数
						uni.setStorage({
							key: 'param', // 自定义参数名称
							data: that.tableFormData, // 参数对象
						})
						that.$modal.msgSuccess("保存成功");
						setTimeout(function() {
							uni.navigateBack({
								delta: 1 // 返回的页面数，这里设置为1表示返回上一页
							});
						}, 1000);
					}
				}, 1000);

			},
			// picturezip() {
			// 	this.$modal.loading("保存中，请耐心等待...")
			// 	for (var i = 0; i < this.imageList.length; i++) {
			// 		this.upload(this.imageList[i])
			// 	}
			// },
			upload() {
				this.$refs["tablefrom"].validate().then(res => {
					this.$modal.loading("保存中，请耐心等待...")
					const baseUrl = config.baseUrl;
					let files = [];
					let that = this;
					for (var i = 0; i < this.imageList.length; i++) {
						const path = this.imageList[i];
						const splitArray = path.split("/");
						const substring = splitArray[splitArray.length - 1];
						files.push({
							"name": substring,
							"uri": this.imageList[i],
						})
					}
					if (this.imageList.length == 0) {
						that.$modal.closeLoading();
						that.$modal.msgSuccess("保存成功");
						uni.setStorage({
							key: 'param', // 自定义参数名称
							data: this.tableFormData, // 参数对象
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1 // 返回的页面数，这里设置为1表示返回上一页
							});
						}, 1000);
					} else {
						//console.log(files)
						const uploadTask = uni.uploadFile({
							url: baseUrl +
							'/development/v9/SceneAbnormalFeedback/uploadList', //仅为示例，非真实的接口地址
							files: files,
							//name: 'file',
							// formData: {
							// 	"jobId": that.Data.jobId,
							// 	"procFileType": that.ljs_tree3.chooseIds,
							// 	"treeName": that.ljs_tree3.departmentName
							// },
							header: {
								'Authorization': getToken()
							},
							success: (uploadFileRes) => {
								that.imageList = [];
								that.tableFormData.fileList = [];
								that.$modal.closeLoading();
								that.$modal.msgSuccess("保存成功");
								// console.log(uploadFileRes.data)
								let data = JSON.parse(uploadFileRes.data).msg
								let datafile = JSON.parse(data);
								// console.log(data)
								// console.log(JSON.parse(data))
								for (var i = 0; i < datafile.length; i++) {
									var file = {
										fileUrl: datafile[i].filePath
									}
									that.tableFormData.fileList.push(file)
								}
								//that.tableFormData.fileList = that.filePath;
								console.log(that.tableFormData.fileList)
								// 当前页面跳转到目标页面时设置参数
								uni.setStorage({
									key: 'param', // 自定义参数名称
									data: that.tableFormData, // 参数对象
								})
								setTimeout(function() {
									uni.navigateBack({
										delta: 1 // 返回的页面数，这里设置为1表示返回上一页
									});
								}, 1000);
							},
							fail: (uploadFileRes) => {
								this.$modal.closeLoading();
								this.$modal.msgError("保存失败");
							},
						});
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress);
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						});
					}
				}).catch(err => {
					return
				})

			},
			delFile(indexs) {
				var file = this.imageList;
				this.imageList = file.filter(function(value, index) {
					return index !== indexs; // 返回下标不为2的元素组成的新数组
				});
			},
			prviewImage(img, index) {
				let urls = []
				if (this.disablePreview) return
				this.imageList.forEach(i => {
					urls.push(i)
				})
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			choose() {
				this.$refs.popup.open();
			},
			photo() {
				this.$refs.popup.close();
				var camera = plus.camera.getCamera() // 获取camera对象
				var resolution = camera.supportedImageResolutions // 获取字符串数组，摄像头支持的摄像分辨率
				camera.captureImage((res) => {
					console.log(res)
					this.imageList.push(res)
					console.log(this.imageList)
				}, (error) => {
					console.log(error)
				}, {
					resolution: resolution[resolution.length - 1],
					format: "jpg"
				})
			},
			album() {
				var that = this;
				this.$refs.popup.close();
				uni.chooseImage({
					count: 1000, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths))
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							that.imageList.push(res.tempFilePaths[i]);
						}
					}
				});
			},
		}
	}
</script>

<style>
	.row-parent {
		width: 80upx;
		width: 100%;
	}

	.row-item {
		display: flex;
		flex-direction: row; //设置布局方向为水平
	}

	.row-style {
		text-align: center;
		width: 33.33%; //每个元素宽度占比父类的三分之一
		height: 80upx;
		line-height: 80upx;
	}

	.uni-file-picker {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		/* #endif */
		flex: 1;
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box {
		background-color: #fff;
		position: relative;
		// flex: 0 0 33.3%;
		width: 33.3%;
		height: 0;
		padding-top: 33.33%;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.textarea-a {
		border: 1px #eee solid;
		width: 90%;
		height: 100px;
		margin-left: 3%;
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box {
		position: relative;
		// flex: 0 0 33.3%;
		width: 15%;
		padding-top: 15%;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.file-picker__box-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 5px;
		border: 1px #eee solid;
		border-radius: 5px;
		overflow: hidden;
	}

	.file-picker__progress {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		/* border: 1px red solid; */
		z-index: 2;
	}

	.file-picker__progress-item {
		width: 100%;
	}

	.file-picker__mask {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		color: #fff;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.file-image {
		width: 100%;
		height: 100%;
	}

	.is-add {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.icon-add {
		width: 50px;
		height: 5px;
		background-color: #f1f1f1;
		border-radius: 2px;
	}

	.rotate {
		position: absolute;
		transform: rotate(90deg);
	}

	.icon-del-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 3px;
		right: 3px;
		height: 26px;
		width: 26px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
		transform: rotate(-45deg);
	}

	.icon-del {
		width: 15px;
		height: 2px;
		background-color: #fff;
		border-radius: 2px;
	}
</style>